.nav-bar {
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding-top: var(--status-bar-height);
	background-color: #fff;
	border-bottom: 1px solid #f0f0f0;

	.nav-back {
		position: absolute;
		left: 0;
		top: var(--status-bar-height);
		height: 44px;
		width: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 40rpx;
		color: #333;
	}

	.nav-title {
		font-size: 34rpx;
		font-weight: 600;
		color: #333;
	}
}

.action-btn {
	padding: 12rpx 24rpx;
	border-radius: 30rpx;
	font-size: 26rpx;
	font-weight: 500;
	transition: opacity 0.2s;
	
	&.primary {
		background: linear-gradient(135deg, #ff6b35, #f7931e);
		color: white;
	}
	
	&.danger {
		background: #ffebee;
		color: #ff4757;
	}
	
	&:active {
		opacity: 0.8;
	}
}

.page-container {
	background: #f8f9fa;
	min-height: 100vh;
}
body {
	background: #f5f5f5;
	color: #333;
}

.dark-mode {
	body {
		background: #1e1e1e;
		color: #eee;
	}

	.group-title {
		color: #aaa !important;
	}

	.setting-item {
		background: #2c2c2c !important;
		color: #eee !important;
	}

	.setting-arrow {
		color: #777 !important;
	}
}

